<template>
  <div>【数据传递关系图】</div>
  <div ref="target" class="w-full flex-1"></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

watch(
  () => props.data,
  () => {
    renderChart();
  }
);

// 1、初始化echart实例
let myChart = null;
const target = ref(null); // 此处的target与div中的ref=“target”一致
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});

// 2、构建option配置对象
const renderChart = () => {
  const options = {
    xAxis: {
      show: false,
      type: 'value',
    },
    yAxis: {
      show: false,
      type: 'value',
    },
    series: [
      // 配置graph 用于展现节点以及节点之间的关系数据
      {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d', // 该系列使用的坐标系
        symbolSize: 26,
        z: 3,
        edgeLabel: {
          // 边界线条文字
          normal: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#fff',
            },
            // formatter与下面的links里面的speed都要配置
            formatter: function (params) {
              let txt = '';
              if (params.data.speed !== undefined) {
                txt = params.data.speed;
              }
              return txt;
            },
          },
        },
        label: {
          normal: {
            show: true,
            position: 'bottom',
            color: '#5e5e5e',
          },
        },
        // 边两端的标记类型
        edgeSymbol: ['none', 'arrow'],
        edgeSymbelSize: 8,
        data: props.data.map((item) => {
          if (item.id !== 0) {
            // 非数据中心
            return {
              name: item.name,
              category: 0,
              // active: true,
              value: item.value, // 位置
              // symbolSize: 30,
              label: {
                normal: {
                  offset: [0, 5],
                  color: '#fff',
                },
              },
            };
          } else {
            // 数据中心
            return {
              name: item.name,
              value: item.value, // 位置
              symbolSize: 100, // 数据中心圆的大小
              // 圆的样式
              itemStyle: {
                normal: {
                  color: {
                    // 渐变色
                    colorStops: [
                      {
                        offset: 0,
                        color: '#157eff',
                      },
                      {
                        offset: 1,
                        color: '#35c2ff',
                      },
                    ],
                  },
                },
              },
              label: {
                normal: {
                  fontSize: '14',
                  offset: [0, 5],
                  color: '#fff',
                },
              },
            };
          }
        }),
        // 节点间的关系数据
        links: props.data.map((item, index) => ({
          source: item.source,
          target: item.target,
          speed: `${item.speed}kb/s`,
          // 线的样式
          lineStyle: {
            normal: {
              color: '#12b5d0',
              curveness: 0.2, // 边的曲度， 0~1，值越大，曲度越大
            },
          },
          label: {
            show: true,
            position: 'middle',
            offset: [10, 0],
          },
        })),
      },
      // 配置lines 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d', // 该系列使用的坐标系
        z: 1,
        // 线特效的绘制
        effect: {
          show: true,
          smooth: false,
          trailLength: 0, // 特效尾迹的长度 0~1
          symbol: 'arrow',
          color: 'rgba(55, 155, 255, 0.5)',
          symbolSize: 12,
        },
        // 线的样式设置
        lineStyle: {
          normal: {
            curveness: 0.2,
          },
        },
        // 固定数据   coord 包含两个到多个二维坐标的数组
        data: [
          [
            {
              coord: [0, 300], // 起点 坐标（0， 300）
            },
            {
              coord: [50, 200], // 终点 坐标（50， 200）
            },
          ],
          [
            {
              coord: [0, 100],
            },
            {
              coord: [50, 200],
            },
          ],
          [
            {
              coord: [50, 200],
            },
            {
              coord: [100, 100],
            },
          ],
          [
            {
              coord: [50, 200],
            },
            {
              coord: [100, 300],
            },
          ],
        ],
      },
    ],
  };

  // 3、通过实例.setOption
  myChart.setOption(options);
};
</script>
<style lang="scss" scoped></style>
